<template>
  <t-form
    ref="form"
    :class="['item-container', `login-${type}`]"
    :data="formData"
    :rules="FORM_RULES"
    label-width="0"
    @submit="onSubmit"
  >
    <template v-if="type == 'password'">
      <t-form-item name="username">
        <t-input v-model="formData.username" size="large" placeholder="请输入账号">
          <template #prefix-icon>
            <user-icon />
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          size="large"
          :type="showPsw ? 'text' : 'password'"
          clearable
          key="password"
          placeholder="请输入登录密码"
        >
          <template #prefix-icon>
            <lock-on-icon />
          </template>
          <template #suffix-icon>
            <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
            <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
          </template>
        </t-input>
      </t-form-item>
    </template>


    <t-form-item class="btn-container">
      <t-button block size="large" type="submit"> 登录 </t-button>
    </t-form-item>

  </t-form>
</template>
<script lang="ts">
// import { reactive } from 'vue';
import Vue from 'vue';
import { UserIcon, LockOnIcon, BrowseOffIcon, BrowseIcon} from 'tdesign-icons-vue';
import { loginParam } from '@/interfaces';
// import { login } from '@/api/user';
// import { actions }  from '@/store';
// import  useRouter  from 'vue-router';
// import useUserStore from '@/store/modules/user';

// const router = useRouter();
// const userStore = user.actions();
// const reactiveObject = Vue.observable({});
// const userStore = useUserStore();
const INITIAL_DATA: loginParam = {
  username: 'test',
  password: '123456',
};
const FORM_RULES = {
  username: [{ required: true, message: '账号必填', type: 'error' }],
  password: [{ required: true, message: '密码必填', type: 'error' }],
};
/** 高级详情 */
export default Vue.extend({
  name: 'Login',
  components: {
    UserIcon,
    LockOnIcon,
    BrowseOffIcon,
    BrowseIcon,
  },
  data() {
    return {
      FORM_RULES,
      type: 'password',
      formData: { ...INITIAL_DATA },
      showPsw: false,
      countDown: 0,
      intervalTimer: null,
    };
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
  },
  methods: {
    switchType(val) {
      this.type = val;
      this.$refs.form.reset();
    },
    async onSubmit({ validateResult }) {
      if (validateResult === true) {
        this.$store.dispatch('user/login', this.formData).then(res =>{
          console.log('res11---->',res)
          if (res.code === '000'){
            this.$message.success('登录成功');
            this.$router.replace('/performance/chain').catch(() => '');
          }
          // this.$message.success(res.msg);
        });
        // this.$message.success('登录成功11');
        // this.$router.replace('/').catch(() => '');
        // await this.$store.dispatch('user/getUserInfo');
        // this.$message.success('登录成功');
        // this.$router.replace('/').catch(() => '');

        // const loginAPI = login()
        // const reqParam = new FormData();
        // reqParam.append('grant_type', 'password');
        // reqParam.append('username', this.formData.username);
        // reqParam.append('password', this.formData.password);
        // console.log("提交的表单内容", this.formData);
        // // await this.$store.dispatch(loginAPI, reqParam,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}});
        // await this.$store.dispatch('user/login', {
        //   apiUrl: loginAPI,
        //   req: reqParam,
        //   headers: {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
        // });
        
      }
    },
    handleCounter() {
      this.countDown = 60;
      this.intervalTimer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown -= 1;
        } else {
          clearInterval(this.intervalTimer);
          this.countDown = 0;
        }
      }, 1000);
    },
  },
});
</script>
